<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基于layui制作的单选答题功能代码</title>
    <link th:href="@{/webjars/layui/2.6.8/css/layui.css}" rel="stylesheet" type="text/css">
    <script th:src="@{/webjars/layui/2.6.8/layui.js}"></script>
    <style>
        html {
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
            background-image: url("/image/f.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .list {
            width: 100%;
            display: none;
            margin: 20px 0 0 0;
        }

        #list1 {
            display: block;
        }

        label {
            font-weight: bold;
        }


        .layui-input-block {
            margin: 5px;
            height: 80px;
            width: 600px;
            /*border: 1px solid red;*/
        }

        #questionName {
            height: 50px;
            width: 490px;
            color: #00FFFF;
        }


        @-webkit-keyframes masked-animation {
            100% {
                background-position: -100% 0;
            }
        }
    </style>

</head>
<body>

<div style="width:500px; margin:40px auto;">

    <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
        <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
    </div>

    <div>
        <div class="list" th:each="question:${questionList}" th:id="${'list'+(questionStat.index+1)}">
            <label class="layui-font-20"><span th:text="${question.question}" id="questionName"></span></label>
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="radio" th:lay-filter="${'wh'+(questionStat.index+1)}"
                               th:name="${'wh'+questionStat.index}" value="A" th:title="${question.optionA}">
                    </div>
                    <div class="layui-input-block">
                        <input type="radio" th:lay-filter="${'wh'+(questionStat.index+1)}"
                               th:name="${'wh'+questionStat.index}" value="B" th:title="${question.optionB}">
                    </div>
                    <div class="layui-input-block">
                        <input type="radio" th:lay-filter="${'wh'+(questionStat.index+1)}"
                               th:name="${'wh'+questionStat.index}" value="C" th:title="${question.optionC}">
                    </div>
                    <div class="layui-input-block">
                        <input type="radio" th:lay-filter="${'wh'+(questionStat.index+1)}"
                               th:name="${'wh'+questionStat.index}" value="D" th:title="${question.optionD}">
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script>
    layui.define(function () {
        var layer = layui.layer,
            element = layui.element,
            form = layui.form,
            $ = layui.$;
        var answerArr = [];
        var questionLength;
        $.ajax({
            url: "question/selectAll",
            async: false,
            success: function (obj) {
                if (obj.code === 0) {
                    questionLength = obj.data.length;
                }
            }
        })
        for (let i = 1; i <= questionLength; i++) {
            if (i != questionLength) {
                form.on('radio(wh' + i + ')', function (data) {
                    answerArr[i - 1] = data.value;
                    $("#list" + i + "").hide();
                    $("#list" + (i + 1) + "").show();
                    element.progress('demo', (Math.ceil(i / questionLength * 100) + '%'))
                })
            } else {
                form.on('radio(wh' + i + ')', function (data) {
                    answerArr[i - 1] = data.value;
                    element.progress('demo', (Math.ceil(i / questionLength * 100) + '%'))
                    layer.confirm("是否提交", {icon: 3, title: "提示"}, function (index) {
                        $.ajax({
                            url: "result/resultSubmit",
                            type: "POST",
                            dataType: 'JSON',
                            data: {"answerList": answerArr},
                            async: false,
                            success: function (obj) {
                                window.location.href="toBack"
                                console.log("保存成功")
                            }
                        })
                        layer.close(index);
                    })
                   /* $.ajax({
                        url: "result/resultSubmit",
                        type: "POST",
                        dataType: 'JSON',
                        data: {"answerList": answerArr},
                        async: false,
                        success: function (obj) {
                            console.log("保存成功")
                        }
                    })*/
                })
            }
        }
    });
</script>

</body>
</html>